<template>
  <div class="department-personnel-page">
    <div class="left">
      <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入关键字" />
      <a-tree
        :tree-data="departmentOpts"
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :fieldNames="{ label: 'name', value: 'id', children: 'childList', key: 'id' }"
        @expand="onExpand"
        @select="selectDepartHandle"
      >
        <template #title="row">
          <span>{{ row.name }}</span>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" @click.prevent.stop>
              <form-outlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-if="String(row.pid) !== '0'" @click="setSupervisorHandle(row)">
                  <a href="javascript:;">设置主管</a>
                </a-menu-item>
                <a-menu-item @click="addNextDepartHandle(row)">
                  <a href="javascript:;">新建下级部门</a>
                </a-menu-item>
                <a-menu-item @click="addEquativeDepartHandle(row)">
                  <a href="javascript:;">{{ String(row.pid) === "0" ? "新建同级公司" : "新建同级部门" }}</a>
                </a-menu-item>
                <a-menu-item @click="modifyDepartHandle(row)">
                  <a href="javascript:;">{{ String(row.pid) === "0" ? "公司权限" : "编辑部门" }}</a>
                </a-menu-item>
                <a-menu-item @click="deleteDepartmentHandle(row)">
                  <a href="javascript:;">{{ String(row.pid) === "0" ? "删除公司" : "删除部门" }}</a>
                </a-menu-item>
                <a-menu-item v-if="String(row.pid) === '0'" @click="changeCompanyInfoHandle(row)">
                  <a href="javascript:;">编辑公司信息</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-tree>
    </div>
    <div class="right">
      <div class="search-wrapper">
        <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"> </super-search>
      </div>
      <div class="content-wrapper">
        <super-table
          :height="tableHeight"
          ref="tableRef"
          v-model:page="searchForm.pageNum"
          v-model:limit="searchForm.pageSize"
          :loading="loading"
          :data="tableData"
          :total="searchForm.total"
          :column="tableColumn"
          @change-page="getData"
        >
          <template #tool>
            <a-button type="primary" @click="addHandle">新增用户</a-button>
            <a-button type="default" @click="importFileHandle">批量导入</a-button>
            <a-button @click="batchModifyDepartHandle">批量修改部门</a-button>
          </template>
          <template #status="{ row }">
            <a-tag v-if="row.status === 1" color="#87d068"> 启用 </a-tag>
            <a-tag v-if="row.status === 0" color="#cd201f"> 停用 </a-tag>
          </template>
          <template #action="{ row }">
            <a-button type="link" :danger="row.status === 1" @click="changeStatusHandle(row)">{{ row.status === 0 ? "启用" : "停用" }}</a-button>
            <a-button type="link" @click="editHandle(row)">编辑</a-button>
            <a-button type="link" @click="removeHandle(row)" danger>删除</a-button>
            <a-button type="link" @click="restUserPasswordHandle(row)">重置密码</a-button>
          </template>
        </super-table>
      </div>
    </div>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="true" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
    <!-- 抽屉 -->
    <a-drawer v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :keyboard="false" :closable="false" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerOpts.visible = false"
        @updateInfo="getDeptTree"
      ></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import AddUser from "./components/addUser/index.vue";
import ImportUser from "./components/importUser/index.vue";
import BatchModifyDepart from "./components/batchModifyDepart/index.vue";
import SetSupervisor from "./components/setSupervisor/index.vue";
import ModifyDepartment from "./components/modifyDepartment/index.vue";
import CompanyInfo from "./components/companyInfo/index.vue";
import { watch } from "vue";
export default {
  name: "DepartmentPersonnel",
  components: {
    AddUser,
    ImportUser,
    BatchModifyDepart,
    SetSupervisor,
    ModifyDepartment,
    CompanyInfo
  }
};
</script>
<script lang="ts" setup>
import { FormOutlined } from "@ant-design/icons-vue";
import TableHeightHook from "@/hook/tableHeightHook";
import { searchItemList, tableColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const { tableHeight, loading } = TableHeightHook(50);
const { searchForm, tableData, searchValue, dialogOpts, drawerOpts, tableRef, departmentOpts, getDeptTree, initDepart, expandedKeys, autoExpandParent } = InitHook();
const {
  searchHandle,
  getData,
  dialogSubmitHandle,
  addHandle,
  editHandle,
  removeHandle,
  changeStatusHandle,
  importFileHandle,
  batchModifyDepartHandle,
  setSupervisorHandle,
  addNextDepartHandle,
  addEquativeDepartHandle,
  modifyDepartHandle,
  deleteDepartmentHandle,
  onExpand,
  selectDepartHandle,
  changeCompanyInfoHandle,
  restUserPasswordHandle
} = OperationHook({
  searchForm,
  dialogOpts,
  tableData,
  tableRef,
  loading,
  expandedKeys,
  autoExpandParent,
  getDeptTree,
  drawerOpts
});
watch(
  () => searchValue.value,
  () => {
    initDepart();
  }
);
getData();
getDeptTree();
</script>
<style lang="stylus" scoped>
.department-personnel-page{
    display: flex;
    .left{
        background-color: #fff;
        width: 240px;
        padding: 12px;
        margin-right: 12px;
    }
    .right{
        width: calc(100% - 240px);
    }
    .tree-node{

    }
    :deep(.ant-dropdown-link){
      margin-left: 8px;
    }
}
</style>
